<template>
  <div id="send-goods">
    <!-- 选择发货时间 -->
    <group>
      <datetime-range 
        title="发货时间："
        :start-date="startDate" 
        end-date="2020-01-01" 
        v-model="sendGoosDate"
        placeholder="请选择发货时间"
        @on-change="dateChange"
      >
      </datetime-range>
    </group>

    <!-- 选择车辆类型tab切换栏 -->
    <div>
      <div style="width: 100vw; background: #fff;">
        <tab style="width: 70%;" :line-width=2 active-color='#EE6623' v-model="index">
          <tab-item class="vux-center" :selected="demo1 === item" v-for="(item, index) in carType_list" @click="demo1 = item" :key="index">{{item.type_name}}</tab-item>
        </tab>
      </div>
      <swiper v-model="index" height="100px" :show-dots="false">
        <swiper-item v-for="(item, index) in carType_list" :key="index">
          <div class="tab-swiper vux-center">
            <img :src="imgSrc(item.attachment_id)" alt="">
            图片{{index}}
          </div>
        </swiper-item>
      </swiper>
    </div>

    <!-- 司机选择/额外需求/特殊规格 -->
    <group label-width="4.5em" label-margin-right="2em" label-align="right">
      <cell title="司机选择:" :value="driver" is-link></cell>
      <cell title="额外需求:" :value="demand" is-link></cell>
      <cell title="特殊规格:"></cell>
      <checker type="checkbox" style="padding: 0 15px 10px;" v-model="chaizuo" default-item-class="demo5-item" selected-item-class="demo5-item-selected">
        <checker-item value="1">全拆座</checker-item>
      </checker>
    </group>

    <!-- 发货/收货信息 -->
    <flow orientation="vertical" style="height:250px; background: #fff; margin: 10px 0 15px;">
      <flow-state title="按此输入发货信息" is-done></flow-state>
      <flow-line is-done></flow-line>
      <flow-state title="按此输入收货信息" is-done></flow-state>
    </flow>
  </div>
</template>

<script>
import { Group, DatetimeRange, dateFormat, Tab, TabItem, Swiper, SwiperItem, Cell, Checker, CheckerItem, Flow, FlowState, FlowLine } from 'vux'
import query from '../../utils/query.js';
export default {
  name: 'sendGoods',
  data () {
    return {
      startDate: dateFormat(new Date(), 'YYYY-MM-DD'),  // 限制选择发货时间的开始日期
      sendGoosDate: [],  // 发货时间
      demo1: '中面包车',
      index: 0,
      carType_list: [],   // 车辆类型
      driver: '',     //司机
      demand: '',    //额外需求
      chaizuo: ''
    }
  },
  components: {
    Group,
    Cell,
    DatetimeRange,
    Tab,
    TabItem,
    Swiper,
    SwiperItem,
    Checker,
    CheckerItem,
    Flow,
    FlowState,
    FlowLine
  },

  created () {
    this.$ajax({
      method: 'post',
      url: `/v1.0/vehicle/vehicle_type_list${query()}`
    })
    .then(res => {
      this.carType_list = res.type_list
    })
  },

  methods: {
    dateChange (val) {
     this.sendGoosDate = val
    },
    imgSrc (id) {
      return `http://120.55.191.69:10010/attachment/${id}${query()}`
    }
  }
}
</script>

<style lang="scss" scoped>
  #send-goods {
    width: 100%;
    height: calc(100vh - 50px);
    background-color: #f8f8f8;
    .demo5-item {
      width: 100px;
      height: 26px;
      line-height: 26px;
      text-align: center;
      border-radius: 3px;
      border: 1px solid #ccc;
      background-color: #fff;
      margin-right: 6px;
      padding: 3px 6px;
      box-sizing: content-box;
    }
    .demo5-item-selected {
      background: #fff url(../../assets/images/active.png) no-repeat right bottom;
      border-color: #ff4a00;
    }
  }
</style>

<style lang="scss">
  #send-goods {
    .vux-no-group-title {
      margin-top: 0;
    }
    .tab-swiper {
      height: 100px;
      background-color: #0f0;
    }
    .vux-center-v, .vux-center-h, .vux-center {
      display: flex;
    }
    .vux-center-v, .vux-center {
      align-items: center;
    }
    .vux-center-h, .vux-center {
      justify-content: center;
    }
  }
</style>

